<!--
/**
* Author: KSJ
* Date: 2022-07-21 19:34
* Desc: 订单列表
*/
-->
<template>
  <yy-page>
    <!--#ifndef MP-TOUTIAO-->
    <view class="bc-white tab-wrap flex">
      <view class="active tab-item">影票订单</view>
      <view class="tab-item" @click="changeGood">商品订单</view>
      <view v-if="open" class="tab-item" @click="changeMallBuy">点餐订单</view>
    </view>
    <!--#endif-->
    <view class="order-list">
      <yy-list :list="listData" :loading="listLoading" :finished="listFinished" empty-type="order">
        <view>
          <film-order-item custom-class="mb20" @click="toDetail(item)" v-for="(item, index) in listData" :key="index" :obj="item" @refresh="listRefresh" />
        </view>
      </yy-list>
    </view>
  </yy-page>
</template>

<script>
  import FilmOrderItem from './components/FilmOrderItem'
  import pageMixins from '@/mixins/pageMixins'
  import listMixins from '@/mixins/listMixins'
  import { deDupArray } from '@/utils'
  export default {
    mixins: [pageMixins, listMixins],
    components: {
      FilmOrderItem
    },
    data() {
      return {
        open: false
      }
    },
    onLoad() {
      this.listLoad()
      this.getSet()
    },
    onShow() {
      // const fromPath = this.$tools.getCurrentPage().fromPath
      // console.log('--------------------------', fromPath)
      // if (fromPath !== 'pagesOrder/order/detail') {
      // }
    },
    methods: {
      onloadList() {
        const query = { ...this.search, ...this.pageInfo }
        return uni.$api.orderFilm.getOrderList(query).then((res) => {
          if (this.isLoading) {
            // 是下啦刷新 清空
            this.listData = []
          }
          const listData = [...this.listData, ...res.list]
          this.listData = deDupArray(listData, 'orderId')
          return res
        })
      },
      getSet() {
        uni.$api.orderFood.getSet({ cinemaId: this.$auth.getLocCinemaInfo().cinemaId }).then((res) => {
          this.open = res.open
        })
      },
      // 去详情页
      toDetail(item) {
        console.log(item)
        if (item.showStatus === '0') {
          this.handlePay(item)
          return
        }
        // todo
        // this.$uMeng.trackEvent('view_my_order_details')

        const query = {
          orderId: item.orderId,
          type: 'film',
          title: 'detail'
        }
        this.$tools.navigateTo('/pagesOrder/order/detail', query)
      },

      handlePay(item) {
        const query = {
          orderId: item.orderId
        }
        this.$tools.navigateTo('/pagesOrder/sureOrder/index', query)
        // todo
        // this.$uMeng.enterTicketOrder(this.$route.path)
      },
      changeGood() {
        this.$tools.navigateTo('/pagesOrder/order/goodsList', {}, 'redirectTo')
      },
      changeMallBuy() {
        this.$tools.navigateTo('/pagesOrder/order/mallBuyList', {}, 'redirectTo')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 88rpx;
    z-index: 10;
    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      color: $mainColor;
      font-weight: bold;
      position: relative;
      &::before {
        content: '';
        width: 30rpx;
        height: 6rpx;
        background: $mainColor;
        position: absolute;
        left: 50%;
        bottom: 10rpx;
        margin-left: -15rpx;
      }
    }
  }
  .order-list {
    min-height: 100vh;
    overflow-x: hidden;
    box-sizing: border-box;
    background: #f3f5f7;
    padding: 108rpx 20rpx 0;
    // #ifdef MP-TOUTIAO
    padding: 20rpx 20rpx 0;
    // #endif
  }
</style>
